<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>订票信息</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%--    引入layui样式--%>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    2. 引入自定义的css文件--%>
    <link rel="stylesheet" href="/css/nav.css">

    <style>
        .cart_img img {
            width: 65px;
            height: 65px;
        }

        .text_slice {
            width: 200px;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>

</head>
<body>
<%@ include file="../common/nav.jsp"%>
<%= new Date()%>

<div class="container-fluid" style="margin-top: 40px">
    <div class="row">
        <div class="table-responsive">
            <table class="table">
                <caption>我的订单列表</caption>
                <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>序号</th>
                    <th>产品图</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${cartList}" var="c" varStatus="vs">
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>${vs.count}</td>
                        <td class="cart_img"><img src="/imgs/${c.productImg}"></td>
                        <td>${c.productName}</td>
                        <td>${c.productPrice}</td>
                        <td><input type="number" style="width: 50%" value="${c.counts}" class="form-control"></td>
                        <td>${c.price}</td>
                        <td class="text_slice">${c.productRemark}</td>
                            <%--                                a超链接触发一个单击事件  --%>
                        <td><a href="javascript:del_cart(${c.id})" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a></td>


                       <td><button class="btn btn-link" onclick="del_cart2(this,${c.id})">支付订单 </button></td>-
                   </tr>
               </c:forEach>
               </tbody>
           </table>
       </div>

   </div>
</div>

<%--    引入layui - js--%>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>

<%--    2. 先引入jquery.min.js--%>
<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
<%--    3. 引入bootstrap.js文件--%>
<script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script>
    //删除购物车 - 同步
    function del_cart(id){
        layer.confirm('确认删除吗?', function(index){
            //确定按钮
            window.location="/cart/del?id="+id;
            //关闭这个询问框
            layer.close(index);
        })
    }

    //异步删除 - 对js要求高
    function del_cart2(obj,cid){

        layer.confirm('确认支付订单吗?', function(index){

            $.get('/cart/ajaxDel',{id:cid},function(data){
                if(data.code=="200"){
                    //直接使用js操作dom
                    //js删除所在的删除行
                    //obj是一个js对象
                    //js对象要转换成jquery对象 - $(js对象)

                    $(obj).parent().parent().remove();

                    layer.msg('支付成功')

                }
                //关闭这个询问框
                layer.close(index);
            });
        })
    }
</script>
</body>
</html>
